<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link href="${pageContext.request.contextPath}/static/semantic/semantic.min.css" rel="stylesheet">
    <link rel="${pageContext.request.contextPath}/stylesheet" href="static/css/blog.css">
    <style>
        body{
            background-image: url("${pageContext.request.contextPath}/static/image/background.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-origin: border-box;
            background-size: cover;
        }

    </style>
</head>
<body>
<div class="ui container">
    <div class="ui stackable grid">
        <div class="ten wide column"></div>
        <div id="login" class="five wide column" style="padding: 120px 0px !important">
            <form id="form" action="${pageContext.request.contextPath}/login" method="post" class="ui form attached segment b-border-radius b-padding-tx" style="background: #f5f5f9">
                <h2 class="ui center aligned icon header">
                    <i class="circular paper plane outline icon"></i>
                    登录
                </h2>
                <div class="field">
                    <label>
                    <i class="user icon"></i>
                        账号
                    </label>
                    <input type="text" name="account" placeholder="输入你的账号">
                </div>
                <div class="field">
                    <label>
                        <i class="unlock icon"></i>
                        密码
                    </label>
                    <input type="password" name="password" placeholder="输入你的密码">
                </div>
                <div class="inline field" style="text-align: center">
                    <div class="ui slider checkbox">
                        <input type="checkbox" tabindex="0" class="hidden">
                        <label>记住我</label>
                    </div>
                </div>
                <div style="text-align: center">
                    <button class="ui button basic" type="submit">登录</button>
                    <div class="ui error message"></div>
                </div>
            </form>
            <div class="ui bottom attached info message b-border-radius">
                没有账号? 点击<a href="${pageContext.request.contextPath}/toRegister">这里注册</a>。
            </div>
            <c:if test="${msg!=null}">
                <div class="ui error message">
                    <ul class="list">
                        <li>${msg}</li>
                    </ul>
                </div>
            </c:if>

        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/semantic/semantic.min.js"></script>
<script>
    $('#form').form({
        on:'blur',
        fields:{
            account:{
                identifier:'account',
                rules:[
                    {
                        type:'empty',
                        prompt:"账号不能为空"
                    },
                ]
            },
            password:{
                identifier: "password",
                rules:[
                    {
                        type: 'empty',
                        prompt: "密码不能为空"
                    }
                ]
            },
        }
        });
</script>
</body>
</html>